<template>
	<div class="custom" v-if="showIndex">
		<div class="search">
			<el-icon style="position: relative; left: -5px; top: 4px"><Search /></el-icon>
			客户搜索
		</div>
		<div style="width: 50%; margin: auto">
			<el-input v-model="guanjian" placeholder="请输入公司关键字">
				<template #prepend>
					<el-select v-model="customerCategory" placeholder="选择分类" clearable style="width: 115px">
						<el-option v-for="dict in customer_category" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</template>
				<template #append>
					<el-button @click="linkTo" :icon="Search" />
				</template>
			</el-input>
		</div>
		<div class="div-button">
			<el-button class="link-button" @click="linkTo"
				><el-icon><User /></el-icon>我的客户</el-button
			>
			<el-button class="link-button" @click="linkToOpen()"
				><el-icon><User /></el-icon>企业公共库</el-button
			>
			<el-button class="link-button" @click="addCustom"
				><el-icon><FolderAdd /></el-icon>添加客户</el-button
			>
		</div>
		<div class="show">
			<div class="item" @click="linkTo">我的客户<br />{{ countData.myLibrary }}</div>
			<div class="item" @click="linkToOpen()">公共库<br />{{ countData.commonLibrary }}</div>
			<div class="item" @click="linkToLi()">已立项<br />{{ countData.projectApproved }}</div>
			<div class="item" @click="linkToAdd()">本月新增<br />{{ countData.newAdditionsThisMonth }}</div>
		</div>
	</div>
	<manageView :isOpen="isOpen" :guanjian="guanjian" :flag="flag" :newMonth="newMonth" :customerCategory="customerCategory" v-else />
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { countCustom } from '@/api/custom/custom'
import manageView from './customerManage.vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const router = useRouter()
const { proxy } = getCurrentInstance()
const { customer_category } = proxy.useDict('customer_category')
const countData = ref({})
countCustom().then((res) => {
	countData.value = res.data
})
const customerCategory = ref('')
const guanjian = ref('')
const newMonth = ref(false)
const showIndex = ref(true)
const isOpen = ref('2')
const flag = ref(false)
const linkTo = () => {
	showIndex.value = false
}
if (route.query.createUserCode) {
	showIndex.value = false
}
const linkToOpen = () => {
	isOpen.value = '1'
	guanjian.value = ''
	customerCategory.value = ''
	showIndex.value = false
}
const linkToLi = () => {
	flag.value = true
	guanjian.value = ''
	customerCategory.value = ''
	showIndex.value = false
}
const linkToAdd = () => {
	guanjian.value = ''
	customerCategory.value = ''
	showIndex.value = false
	newMonth.value = true
}
const addCustom = () => {
	router.push({
		path: '/customer/customInfo'
	})
}
</script>
<style lang="scss" scoped>
.custom {
	background-color: #f5f5f5 !important;
	text-align: center;
	top: 100px;
	margin: 10px 0px 10px 10px;
	overflow: auto;
	.search {
		text-align: center;
		font-size: 20px;
		height: 50px;
		line-height: 50px;
	}
	.div-button {
		height: 80px;
		line-height: 80px;
		.link-button {
			width: 115px;
			margin-right: 5px;
			color: #409eff;
			border-color: #409eff;
			background-color: #edf5ff;
		}
	}
	.show {
		height: 100px;
		line-height: 100px;
		text-align: center;
		.item {
			display: inline-block;
			width: 200px;
			height: 80px;
			line-height: 40px;
			border-right: 2px rgb(236, 233, 233) solid;
			cursor: pointer;
		}
		.item:last-child {
			border-right: none;
		}
	}
}
</style>
